<template>
	<div class="menuGuanli w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>菜单管理</p>
		</div>
		<div class="wrapIn">
			<div class="el-tabs-report"> 
				<a class="listOne" @click="firstMenu" v-if="menu.cdgl_add">新增一级菜单</a>
            </div>
			<ul class="tableTitle">
				<li style="width: 10%;">排序</li>
				<li style="width: 20%;">一级菜单</li>
				<li style="width: 20%;">二级菜单</li>
				<li style="width: 20%;">三级菜单</li>
				<li style="width: 30%;" class="index">操作</li>
			</ul>
			<ul v-for="(item,index) in tableData" class="tableContent">
				<li style="width: 10%;">{{item.menuOrder}}</li>
				<li style="width: 20%;color:#44cef6">{{item.name}}<img src="../../assets/qudaoImg/switch_add.png" @click="addSecondMenu(item,index)"/></li>
				<li style="width: 20%;" class="liColorParent">1</li>
				<li style="width: 20%;" class="liColorParent">1</li>
				<li style="width: 30%;border-right: none;">
					<a @click="handleEdit(item)" class="edit" v-if="menu.cdgl_edit">编辑</a>
					<a @click="btnManager(item)" class="btnManager" v-if="menu.cdgl_button" v-bind:style="{display:item.childList.length>0?'none':'inline-block'}">按钮管理</a>
					<div class="switch clearfix" @click="updateswitch(item)">
				    	<el-switch class="switchStyle" v-model="item.enVisible" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText" v-if="menu.cdgl_switch"></el-switch>
					</div>
					<a @click="handleDelete(index,tableData)" class="delete" v-if="menu.cdgl_del">删除</a>
				</li>
				<li v-for="(secondItem,index) in item.childList" class="secondStyle">
					<div class="secondDiv clearFix">
						<div style="width: 10%;">1</div>
						<div style="width: 20%;">1</div>
						<div style="width: 20%;color:#333">{{secondItem.name}}<img src="../../assets/qudaoImg/switch_add.png" @click="addThirdMenu(item,index)"/></div>
						<div style="width: 20%;">1</div>
						<div style="width: 30%;border-right: none;">
							<a @click="editSecond(secondItem,index)" class="edit" v-if="menu.cdgl_edit">编辑</a>
							<a @click="btnManager(secondItem)" class="btnManager" v-if="menu.cdgl_button">按钮管理</a>
							<span class="switch clearfix" @click="updateswitch(secondItem)">
								<el-switch class="switchStyle" v-model="secondItem.enVisible" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText" v-if="menu.cdgl_switch"></el-switch>
							</span>
							<a @click="handleDelete(index, item.childList)" class="delete" v-if="menu.cdgl_del">删除</a>
						</div>
					</div>
				
					<div v-for="(threeItem,index) in secondItem.childList" class="secondStyle">
						<div class="secondDiv clearFix">
							<div style="width: 10%;">1</div>
							<div style="width: 20%;">1</div>
							<div style="width: 20%;">1</div>
							<div style="width: 20%;color:#333">{{threeItem.name}}</div>
							<div style="width: 30%;border-right: none;">
								<a @click="editThird(threeItem,index)" class="edit" v-if="menu.cdgl_edit">编辑</a>
								<a @click="btnManager(threeItem)" class="btnManager" v-if="menu.cdgl_button">按钮管理</a>
								<span class="switch clearfix" @click="updateswitch(threeItem)">
									<el-switch class="switchStyle" v-model="threeItem.enVisible" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText" v-if="menu.cdgl_switch"></el-switch>
								</span>
								<a @click="handleDelete(index,secondItem.childList)" class="delete" v-if="menu.cdgl_del">删除</a>
							</div>
						</div>
					</div>
				</li>
			</ul>
			<div class="pag_block">
				<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total" ></el-pagination>
			</div>
			<!--一级弹窗-->
			<div class="menuGuanliWrap" v-show="firstShow">
				<p>{{firstText}}</p>
				<div class="menuLine">
					<em>一级菜单名称：</em>
					<input type="text" placeholder="" v-model="firstMenuName"/>
				</div>
				<div class="menuLine">
					<em>URL：</em>
					<input type="text" placeholder="" v-model="firstMenuURL"/>
				</div>
				<div class="menuLine">
					<em>序号：</em>
					<input type="text" placeholder="" v-model="firstMenuNum"/>
				</div>
				<div class="menuLine">
					<em>权限标识：</em>
					<input type="text" placeholder="" v-model="firstMenuQx"/>
				</div>
				<div class="menuLine">
					<em>Icon：</em>
					<input type="text" placeholder="" v-model="firstMenuIcon"/>
				</div>
				<div class="menuLine">
					<em>状态：</em>
					<div class="switch clearfix" style="display: inline-block;">
						<el-switch class="switchStyle" v-model="firstMenuStatus" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText"></el-switch>
					</div>
				</div>
				<div class="menuLine">
					<a @click="addSubmitSave">保存</a>
					<a @click="cancel">取消</a>
				</div>
			</div>
			<!--二级弹窗-->
			<div class="menuGuanliWrap" v-show="secondShow">
				<p>{{secondText}}</p>
				<div class="menuLine">
					<em>上级菜单名称：</em>
					<input type="text" placeholder="" v-model="parentName"/>
				</div>
				<div class="menuLine">
					<em>{{menuName}}：</em>
					<input type="text" placeholder="" v-model="secondMenuName"/>
				</div>
				<div class="menuLine">
					<em>URL：</em>
					<input type="text" placeholder="" v-model="secondMenuURL"/>
				</div>
				<div class="menuLine">
					<em>序号：</em>
					<input type="text" placeholder="" v-model="secondMenuNum"/>
				</div>
				<div class="menuLine">
					<em>权限标识：</em>
					<input type="text" placeholder="" v-model="secondMenuQx"/>
				</div>
				<div class="menuLine">
					<em>状态：</em>
					<div class="switch clearfix" style="display: inline-block;">
						<el-switch class="switchStyle" v-model="secondMenuStatus" active-color="#44cef6" inactive-color="#999" :active-value="1" :inactive-value="0" :active-text="activeText" :inactive-text="inActiveText"></el-switch>
					</div>
				</div>
				<div class="menuLine">
					<a @click="MenuSubmit">保存</a>
					<a @click="secondMenucancel">取消</a>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				menu:'',
				nowType:'add',
				levelStatus:2,
				//一级弹窗设置
				firstShow:false,
				firstText:'新增一级菜单',
				firstMenuName:'',
				firstMenuURL:'',
				firstMenuNum:'',
				firstMenuQx:'',
				firstMenuIcon:'',
				firstMenuStatus:'',
				//二级弹窗设置
				secondShow:false,
				secondText:'',
				parentName:'',
				secondMenuName:'',
				secondMenuURL:'',
				secondMenuQx:'',
				secondMenuNum:'',
				secondMenuStatus:'',
				menuName:'',
				transitionId:'',//传递父id作为子id
				
				activeText: '开启',
				inActiveText: '关闭',
				activeHeight: '42px',
				inactiveHeight: '0px',
				activeBorder: 'border-bottom: 1px solid #ccc',
				inactiveBorder: 'none',
				status: 0,
				activeState:false,
				wrapShow:false,
				tableData: [],
				ruleForm: {
					menuGuanliFirst:'',
					menuGuanliChildren: '',
					menuGuanliUrl:'',
					menuGuanliType:'',
					status:0,
					id:''
				},
				option: [{
					value: 1,
					label: '课程'
				}, {
					value: 2,
					label: '资讯'
				}],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				sort:1,
				index:1,
				childrenIndex:0,
				childrenSaveType:'add'
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/sys/selectPermission",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						page: this.currentpage,
						num: this.pagesize
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			handleEdit(e) {
				this.$ajax({
				 	url: this.$root.jifuUrl + "/sys/getPermissionbyId",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'POST',
				 	data: {id:e.id},
				 	success: res => {
				 		if (res.data.code == 200) {
				 			var s = res.data.data;
				 			this.firstShow = true;
							this.firstMenuName = s.name;
							this.firstMenuURL = s.menuUrl;
							this.firstMenuNum = s.menuOrder;
							this.firstMenuQx = s.code;
							this.firstMenuIcon = s.icon;
							this.firstMenuStatus = s.enVisible;
							this.nowType = 'edit';
							this.firstText = '编辑一级菜单';
							this.transitionPid = s.id;
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
				 	}
				});
			},
			firstMenu(){
				this.firstShow = true;
			},
			addFirstWrap(){
				let s={
					pid:0,
					name: this.firstMenuName,
					menuUrl:this.firstMenuURL,
					menuOrder:this.firstMenuNum,
					code:this.firstMenuQx,
					icon:this.firstMenuIcon,
					enVisible:this.firstMenuStatus,
					type:1,// 1为菜单 2为按钮 3为API
					level:1//级别
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/sys/addPermission',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'POST',
					success: res => {
						if(res.data.code == 200) {
							this.firstShow = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});	
			},
			updateFirstWrap(){
				let s={
					id:this.transitionPid,
					pid:0,
					name: this.firstMenuName,
					menuUrl:this.firstMenuURL,
					menuOrder:this.firstMenuNum,
					code:this.firstMenuQx,
					icon:this.firstMenuIcon,
					enVisible:this.firstMenuStatus,
					type:1,// 1为菜单 2为按钮 3为API
					level:1//级别
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/sys/updatePermission',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.firstShow = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});	
			},
			addSubmitSave() {
				let that = this;
				if(that.nowType == 'add') {
					that.addFirstWrap();
				} else if(that.nowType == 'edit') {
					this.updateFirstWrap();
				}
			},
			cancel(){
				this.firstShow = false;
				this.nowType = 'add';
			},
//			二级菜单
			addSecondMenu(e,index){
				this.secondShow = true;
				this.parentName = e.name;
				this.transitionId = e.id;//传递父id作为子id
				this.secondText = '新增二级菜单';
				this.menuName = '二级菜单名称';
			},
			addSecondWrap(){
				let s={
					pid:this.transitionId,
					name: this.secondMenuName,
					menuUrl:this.secondMenuURL,
					menuOrder:this.secondMenuNum,
					enVisible:this.secondMenuStatus,
					code:this.secondMenuQx,
					type:1,// 1为菜单 2为按钮 3为API
					level:2//级别
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/sys/addPermission',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'POST',
					success: res => {
						if(res.data.code == 200) {
							this.secondShow = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});	
			},
			editSecond(e,index){
				console.log('当前信息',e.id,index);
				this.$ajax({
				 	url: this.$root.jifuUrl + "/sys/getPermissionbyId",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'POST',
				 	data: {id:e.id},
				 	success: res => {
				 		if (res.data.code == 200) {
				 			var s = res.data.data;
				 			this.secondShow = true;
				 			this.parentName = s.pname;
							this.secondMenuName = s.name;
							this.secondMenuURL = s.menuUrl;
							this.secondMenuNum = s.menuOrder;
							this.secondMenuQx = s.code;
							this.secondMenuStatus = s.enVisible;
							this.nowType = 'edit';
							this.secondText = '编辑二级菜单';
							this.menuName = '二级菜单名称';
							this.transitionPidSecond = s.id;
							this.transitionId = s.pid;
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
				 	}
				})
			},
			updateSecondWrap(){
				let s={
					id:this.transitionPidSecond,
					pid:this.transitionId,
					name: this.secondMenuName,
					menuUrl:this.secondMenuURL,
					menuOrder:this.secondMenuNum,
					enVisible:this.secondMenuStatus,
					code:this.secondMenuQx,
					type:1,// 1为菜单 2为按钮 3为API
					level:2//级别
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/sys/updatePermission',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.secondShow = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});	
			},
//			三级菜单
			addThirdMenu(e,index){
				console.log(e,index);
				this.secondShow = true;
				this.parentName = e.childList[index].name;
				this.transitionId = e.childList[index].id;//传递父id作为子id
				this.secondText = '新增三级菜单';
				this.menuName='三级菜单名称';
				this.levelStatus=3;
			},
			addThirdWrap(){
				let s={
					pid:this.transitionId,
					name: this.secondMenuName,
					menuUrl:this.secondMenuURL,
					menuOrder:this.secondMenuNum,
					enVisible:this.secondMenuStatus,
					code:this.secondMenuQx,
					type:1,// 1为菜单 2为按钮 3为API
					level:3//级别
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/sys/addPermission',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'POST',
					success: res => {
						if(res.data.code == 200) {
							this.secondShow = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});	
			},
			editThird(e,index){
				this.$ajax({
				 	url: this.$root.jifuUrl + "/sys/getPermissionbyId",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'POST',
				 	data: {id:e.id},
				 	success: res => {
				 		if (res.data.code == 200) {
				 			var s = res.data.data;
				 			this.secondShow = true;
				 			this.parentName = s.pname;
							this.secondMenuName = s.name;
							this.secondMenuURL = s.menuUrl;
							this.secondMenuNum = s.menuOrder;
							this.secondMenuQx = s.code;
							this.secondMenuStatus = s.enVisible;
							this.nowType = 'edit';
							this.secondText = '编辑三级菜单';
							this.menuName = '三级菜单名称';
							this.transitionPidSecond = s.id;
							this.transitionId = s.pid;
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
				 	}
				})
			},
			updateThirdWrap(){
				let s={
					id:this.transitionPidSecond,
					pid:this.transitionId,
					name: this.secondMenuName,
					menuUrl:this.secondMenuURL,
					menuOrder:this.secondMenuNum,
					enVisible:this.secondMenuStatus,
					code:this.secondMenuQx,
					type:1,// 1为菜单 2为按钮 3为API
					level:3//级别
				};
				this.$ajax({
					url: this.$root.jifuUrl +'/sys/updatePermission',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: s,
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.secondShow = false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});	
			},
			MenuSubmit() {
				if(this.levelStatus==2){
					this.secondMenuSubmit()
				}else if(this.levelStatus==3){
					this.thirdMenuSubmit()
				}
			},
			secondMenuSubmit() {
				if(this.nowType == 'add') {
					this.addSecondWrap();
				}else if(this.nowType == 'edit') {
					this.updateSecondWrap();
				}
			},
			thirdMenuSubmit(){
				if(this.nowType == 'add') {
					this.addThirdWrap();
				} else if(this.nowType == 'edit') {
					this.updateThirdWrap();
				}
			},
			secondMenucancel(){
				this.secondShow = false;
				this.nowType = 'add';
				//将编辑状态内容清空
				this.secondMenuName='';
				this.secondMenuURL='';
				this.secondMenuNum='';
				this.secondMenuQx='';
			},
			
			//菜单switch按钮
			updateswitch(item){
				if(item.enVisible == 0){
					let s={
						id:item.id,
						enVisible:0
					};
					this.$ajax({
						url: this.$root.jifuUrl +'/sys/updatePermissionEnvisible',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: s,
						method: 'PUT',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({
									alertText: '保存成功',
									alertSubmit: function() {
										alertStatus: 0;
										that.getTableList();
									}
								});
								this.$rootFunction().deleteInTableList();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}else{
					let s={
						id:item.id,
						enVisible:1
					};
					this.$ajax({
						url: this.$root.jifuUrl +'/sys/updatePermissionEnvisible',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: s,
						method: 'PUT',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({
									alertText: '保存成功',
									alertSubmit: function() {
										alertStatus: 0;
										that.getTableList();
									}
								});
								this.$rootFunction().deleteInTableList();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			handleDelete(index,item){
				this.delIndex = index;
				this.delItem = item;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit(){
				console.log(this.delItem[this.delIndex].id);
				this.$ajax({
				 	url: this.$root.jifuUrl + "/sys/deletePermissionbyId",
				 	headers:{'ContentType': 'application/json; charset=utf-8'},
				 	method: 'DELETE',
				 	data: {id:this.delItem[this.delIndex].id},
				 	success: res => {
				 		if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
				 	}
				});
			},
			//按钮管理
			btnManager(secondItem){
				this.$router.push({
					name: 'btnManager',
					params: {
						id:secondItem.id,
						level:secondItem.level
					}
				});
			},
			goaddmenuGuanli(){
				this.$router.push({
          			path: '/addmenuGuanli'
        		})
			},
		    handleCurrentChange(value) {
		        this.currentpage = value;
		        this.getTableList();
		    }
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.menu = this.$root.huasan.menu;
		}
	};
</script>

<style>
	.menuGuanli{padding-bottom:100px}
	.menuGuanli .wrapIn {width:100%;height:auto;}
	.menuGuanli .wrapIn .tableTitle {height:34px;line-height:34px;border:1px solid #ccc;}
	.menuGuanli .wrapIn .tableTitle li{font-size: 15px;}
	.menuGuanli .wrapIn ul{overflow: hidden;}
	.menuGuanli .wrapIn li {display:block;float:left;text-align:center;color:#333;font-size:14px;border-right:1px solid #ccc;box-sizing: border-box;}
	.menuGuanli .wrapIn .tableTitle li.index {border-right:none;}
	.menuGuanli .tableContent{height:auto;border:1px solid #ccc;border-top: none;}
	.menuGuanli .tableContent li {height:auto;line-height:42px;font-weight:normal;}
	.menuGuanli .tableContent li.indexleft {border-left:1px solid #ccc;}
	.menuGuanli .tableContent li .edit {font-size:14px;color:#0083E2;cursor: pointer;}
	.menuGuanli .tableContent li .btnManager{font-size:14px;color:#44CEF6;cursor: pointer;margin-left: 8px;}
	.menuGuanli .tableContent li .delete {font-size:14px;color:#FF2D51;cursor: pointer;}
	.menuGuanli .tableContent li.content .contentC {display:inline-block;border-right:1px solid #ccc;float:left;color:#fff;height:42px;line-height:42px;}
	.menuGuanli .tableContent li img{margin-left: 10px;position: relative;top: 2px;cursor: pointer;}
	.menuGuanli .switch {display:inline-block;border-radius:15px;box-sizing:border-box;overflow:hidden;position:relative;top:3px;margin:0 10px;}
	.menuGuanli .switch div {float:left;cursor: pointer;}
	.menuGuanli .switch-text {height:17px;line-height:17px;color:#ffffff;font-size:12px;padding:0 3px 0 3px;}
	.menuGuanli .switch-icon {width:14px;height:14px;border-radius:13px;background-color:#ffffff;border-radius:1px solid #dcdcdc;margin:1px;}
	
	.menuGuanli .wrapIn .pag_block{margin-top: 25px;}
	.menuGuanli .el-form-item__label{height: 36px;line-height: 36px;}
	.menuGuanli .el-input .el-input__inner{padding: 0 0 0 10px!important;}
	.menuGuanli .el-form-item__content{width: 100%;}
	.menuGuanli .menuGuanli .el-input,.menuGuanli .el-input input{width: 133px;height: 36px;line-height: 36px;}
	.menuGuanli .el-form-item{margin-bottom: 10px;}
	
	.menuGuanli .switchStyle span.el-switch__label--right{top: 0;left: -17px}
	.menuGuanli .switchStyle span.el-switch__label--left{top: 0;left: 8px}
	.menuGuanli .beforeDelete{width: 467px;height: 250px;position: fixed;top: 50%;left: 50%;margin-top: -125px;margin-left: -233px;z-index: 999;background: #fff;border: 1px solid #ccc;}
	.menuGuanli .beforeDelete p{text-align: center;font-size: 16px;color:#333;margin-top: 63px;}
	.menuGuanli .beforeDelete .delBtn{width: 287px;margin: 0 auto;margin-top: 63px;}
	.menuGuanli .beforeDelete .delBtn a{background: #44CEF6;height: 33px;line-height: 33px;width: 100px;display: inline-block;color:#fff;text-align: center;border-radius: 5px;cursor: pointer;font-size: 14px;}
	.menuGuanli .beforeDelete .delBtn a:nth-child(2){background: #ccc;}
	.menuGuanliWrap .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:125px;height:70px;}
	.menuGuanliWrap .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.menuGuanliWrap .avatar-uploader-icon {font-size:28px;color:#8c939d;width:125px;height:60px;text-align:center;background:#f2f2f2;padding-top:10px;}
	.menuGuanliWrap .avatar-uploader-icon b{font-size:14px;}
	.menuGuanliWrap .avatar-uploader-icon em{font-style: normal;}
	.menuGuanliWrap .avatar {width:125px;height:70px;display:block;}

	.menuGuanli .wrapIn .secondStyle{width: 100%;box-sizing: border-box;border-right:none!important;border-top: 1px solid #ccc;}
	.menuGuanli .secondStyle:last-child{border-bottom: none;}
	.menuGuanli .secondDiv div{float: left;display: block;border-right:1px solid #ccc;box-sizing: border-box;color: #fff;}
	.menuGuanli .secondDiv .switch div{border-right:none}
	.menuGuanli li.liColorParent{color:#fff}
	
	/*一级弹窗*/
	.menuGuanliWrap {width:468px;height:350px;position: fixed;top: 50%;left: 50%;margin-top: -175px;margin-left: -234px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.menuGuanliWrap p{margin: 10px 0 0 20px;color: #000;}
	.menuGuanliWrap .menuLine{width:100%;height:auto;padding:10px 0 0 40px;box-sizing: border-box;}
	.menuGuanliWrap .menuLine em{width: 113px;text-align: right;color: #333;display: inline-block;font-style: normal;}
	.menuGuanliWrap .menuLine input{width: 185px;height: 30px;line-height:30px;display: inline-block;font-size: 14px;color: #333;border: 1px solid #ccc;border-radius: 5px;padding-left: 15px;}
	.menuGuanliWrap a{background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;color:#fff;cursor: pointer;text-align: center;font-size: 14px;border-radius: 5px;margin-left: 65px;margin-top: 10px;}
	.menuGuanliWrap a:nth-child(2){background:#ccc;margin-left:50px;}
	.menuGuanli .menuGuanliWrap .switchStyle span.el-switch__label--right{top: 0;left: -4px}
	.menuGuanli .menuGuanliWrap .switchStyle span.el-switch__label--left{top: 0;left: 20px}
	.menuGuanli .pag_block li{font-size: 12px;color: #ccc;}
	.menuGuanli .pag_block li.active{color: #44CEF6;border-right: 1px solid #44CEF6;}
</style>